<template>
  <div
    data-v-post
    class="post"
    v-infinite-scroll="load"
    infinite-scroll-disabled="disabled"
  >
    <!-- <div class="post-top">
      <NewTopNav></NewTopNav>
    </div> -->
    <div class="post-body">
      <div class="post-body-inner">
        <div class="post-menu">
          <div class="post-spangroup">
            <span
              class="isactive"
              data-color="#333"
              @click="changeColor(-1, $event)"
              >综合.</span
            >
            <span data-color="#8076a3" @click="changeColor(0, $event)"
              >音乐.</span
            >
            <span data-color="#3170a7" @click="changeColor(1, $event)"
              >游戏.</span
            >
            <span data-color="#add5a2" @click="changeColor(2, $event)"
              >动漫.</span
            >
            <span data-color="#fba414" @click="changeColor(3, $event)"
              >生活.</span
            >
          </div>
        </div>
        <div class="post-content">
          <div
            class="post-content-item"
            v-for="item in getCurrentPostList"
            :key="item.id"
            @click="toPostDetail(item.id)"
          >
            <img class="post-cover" :src="item.cover" alt="" />
            <h2 class="post-title">{{ item.title }}</h2>
            <span class="post-btn1">Click this Post</span>
            <p class="post-contents">
              {{ item.content.replace(/&lt;[^>]+>/g, "") }}
            </p>

            <span class="post-btn2">Read more</span>
          </div>

          <div v-if="loading" class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
          </div>

          <div class="post-nomore" v-if="noMore">
            <img src="../../assets/icon/nomore.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <el-backtop
      style="
        right: 13%;
        bottom: 30px;
        width: 50px;
        height: 50px;
        color: #666;
        border-radius: 0;
      "
      target=".post"
    >
    </el-backtop>
  </div>
</template>

<script>
import NewTopNav from "@/components/NewTopNav";

export default {
  name: "Post",
  data: function () {
    return {
      postList: [],
      currentPostList: [],

      end: 3,
      loading: false,
    };
  },
  components: {
    NewTopNav,
  },

  computed: {
    getCurrentPostList() {
      return this.currentPostList.slice(0, this.end);
    },

    noMore() {
      return this.end >= this.postList.length;
    },

    disabled() {
      return this.loading || this.noMore;
    },
  },

  created() {
    this.getPostList();
  },

  methods: {
    changeColor(index, e) {
      //   console.log(e.target, e.currentTarget);

      let targetNode = e.target;
      let spanNode = e.target.parentNode.querySelectorAll("span");

      for (let i = 0; i < spanNode.length; i++) {
        spanNode[i].setAttribute("class", "");
        spanNode[i].style.color = spanNode[i].getAttribute("data-color");
        spanNode[i].style.backgroundColor = "";
      }

      targetNode.style.color = "#fff";
      targetNode.style.backgroundColor = targetNode.getAttribute("data-color");

      this.switchPost(index);
    },

    load() {
      // this.currentPostList;
      this.loading = true;
      setTimeout(() => {
        this.end += 3;
        this.loading = false;
      }, 1000);
    },

    // 获取Post
    getPostList() {
      this.axios
        .get(`getpost`)
        .then((response) => {
          if (response.data.status == 200) {
            this.postList = response.data.data;
            this.switchPost(-1);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 切换专栏分类
    switchPost(region) {
      this.end = 3;
      if (region === -1) {
        this.currentPostList = this.postList.filter((value, index) => {
          return true;
        });
      } else {
        this.currentPostList = this.postList.filter((value, index) => {
          return value.region === region;
        });
      }
    },

    toPostDetail(id) {
      // console.log(id);
      this.$router.push(`/post/${id}`);
    },
  },
};
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
.post[data-v-post] {
  width: 100%;
  height: 100%;
  padding: 15px 18px;

  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .post-top {
    width: 100%;
    height: 65px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 0 6px #eee;
  }

  .post-body {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    border-radius: 10px;

    .post-body-inner {
      width: 65%;
      margin: 0 auto;
      background-color: #fff;

      .post-menu {
        display: flex;
        width: 100%;
        height: 80px;

        .post-spangroup {
          margin: auto;
          padding: 0 5px;

          span {
            position: relative;
            display: inline-block;
            padding: 0 10px;
            font-size: 24px;
            font-weight: 700;
            z-index: 10;
            cursor: pointer;
          }

          span::after {
            content: "";
            display: inline-block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0%;

            z-index: -1;
            transition: height 0.4s ease-in-out;
          }

          span:nth-child(1) {
            color: #333;
          }
          span:nth-child(2) {
            color: #8076a3;
          }
          span:nth-child(3) {
            color: #3170a7;
          }
          span:nth-child(4) {
            color: #add5a2;
          }
          span:nth-child(5) {
            color: #fba414;
          }

          span:nth-child(1)::after {
            background-color: #333;
          }
          span:nth-child(2)::after {
            background-color: #8076a3;
          }
          span:nth-child(3)::after {
            background-color: #3170a7;
          }
          span:nth-child(4)::after {
            background-color: #add5a2;
          }
          span:nth-child(5)::after {
            background-color: #fba414;
          }

          span:hover {
            color: #fff !important;

            &::after {
              height: 100%;
            }
          }

          .isactive {
            color: #fff !important;
            background-color: #333;
          }
        }
      }

      .post-content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .post-content-item {
          position: relative;
          width: 50%;
          height: 460px;
          background-color: #fff;
          border: 1px solid #eee;
          cursor: pointer;
          overflow: hidden;

          .post-cover {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .post-title {
            position: absolute;
            left: 50%;
            bottom: 60%;
            transform: translate3d(-50%, 0, 0);
            width: 62%;
            max-height: 24%;
            font-size: 26px;
            text-align: center;
            color: #fff;
            word-wrap: break-word;
            overflow: hidden;

            transition: transform 0.4s;
          }

          .post-btn1 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            padding: 12px 20px;
            font-size: 24px;
            color: #fff;
            background-color: #333;

            &::after {
              position: relative;
              left: 50%;
              display: block;
              content: "";
              width: 0;
              height: 2px;
              transform: translate3d(-50%, 0, 0);
              background-color: #fff;
              transition: width 0.4s;
            }
          }

          .post-btn2 {
            position: absolute;
            right: 18px;
            top: -50px;
            height: 50px;
            padding: 0 10px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            color: #fff;
            background-color: #333;
            transition: top 0.2s;
          }

          .post-contents {
            position: absolute;
            left: 50%;
            top: 60%;
            transform: translate3d(-50%, 0, 0);
            width: 50%;
            max-height: 14%;
            text-align: center;
            font-size: 16px;
            word-wrap: break-word;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            color: #fff;

            overflow: hidden;
            transition: transform 0.4s;
          }

          &:hover {
            .post-title {
              transform: translate3d(-50%, -0.5em, 0);
            }

            .post-contents {
              transform: translate3d(-50%, 0.5em, 0);
            }

            .post-btn1 {
              &::after {
                width: 100%;
              }
            }

            .post-btn2 {
              top: 0;
            }
          }
        }

        // 1 4 7 10 13 >> 1 + (n - 1)*3 >> 3n -2

        .post-content-item:nth-child(3n-2) {
          width: 100%;
          height: 580px;
        }

        .post-nomore {
          display: flex;
          flex: 1;
          height: 460px;

          img {
            position: relative;
            width: 200px;
            height: 200px;
            margin: auto;
          }
        }

        .spinner {
          width: 70px;
          margin: auto;
          text-align: center;

          & > div {
            width: 18px;
            height: 18px;
            background-color: orangered;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
          }

          .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
          }

          .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
          }
        }

        @-webkit-keyframes sk-bouncedelay {
          0%,
          80%,
          100% {
            -webkit-transform: scale(0);
          }
          40% {
            -webkit-transform: scale(1);
          }
        }

        @keyframes sk-bouncedelay {
          0%,
          80%,
          100% {
            -webkit-transform: scale(0);
            transform: scale(0);
          }
          40% {
            -webkit-transform: scale(1);
            transform: scale(1);
          }
        }
      }
    }
  }
}
</style>